<template>
    <div>
        <Navbar appTitle="不合格原因" @clickLeft="btnCancel" :isGoHistory="false"/>
        <div class="search-content wrap-apply" :style="{ top: GLOBAL.currentEnvironment ? '0' : '' }">

            <div class="searchBox">
                <van-cell-group class="cell-group-list-div" v-for="item in list" :key="item.id">
                    <p class="labelt FormTit labeltText"><span></span>{{ item.nonconformityDescribe }}:</p>
                    <van-field class="dield-num-class" :maxlength="9" @input="validateInput($event,item)" v-model="item.num" placeholder="请输入" />
                </van-cell-group>
                <div class="bottomLine"></div>
            </div>
            <div class="search-bottom">
                <div class="search-btm-div-class"><span>原因：{{ isNum }} </span><span> 总数：{{ totalNum }}</span></div>
                <span class="btncancel" @click="btnCancel">取消</span>
                <span class="btnconfirm" @click="btnConfirm">确定</span>
            </div>

        </div>
    </div>
</template>
  
<script>
import Navbar from "@/components/navBar/navBar_right";
import { basicNonconformityList } from "@/api/productionApply";
export default {
    name: "search",
    components: {
        Navbar,
    },
    data() {
        return {
            list:[],
            filterForm: {
                planStartTimeArr: "",
                planOverTimeArr: "",
            },

        };
    },
    computed: {
        totalNum(){
        let result = 0
        for(let i=0;i < this.list.length;i++){
            if(this.list[i].num != undefined){
                result = result + Number(this.list[i].num)
            }
        }
        return result
      },
      isNum(){
        return this.list.filter(item => item.num).length
      }
    },
    mounted() { },
   async created() {
     const res = await basicNonconformityList()
     console.log(res.result.records);
    this.list = res.result.records
    },
    methods: {
        btnCancel() {
            this.$emit('noCauseCancel');
        },
        btnConfirm() {
        const valList = this.list.filter(item => item.num)
        this.$emit('noCauseConfirm',valList,this.totalNum);
        },
        validateInput(e,item) {
    // 使用正则表达式进行校验
    const pattern = /^(?!0\d)(\d{0,9}|\d{0,5}\.\d{0,4})$/;
    const valid = pattern.test(item.num);
    
    // 如果输入不符合要求，清除输入框中的内容
    if (!valid) {
      item.num = '';
    }
  }
    },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";

.cell-group-list-div{
    display: flex;
    align-items: center;
}
.dield-num-class{
    flex: 1;
}
.search-btm-div-class{
    flex: 1;
    margin-right: 20px;
    font-size: 28px;
}
.labeltText{
    padding-left: 20px;
    width: 62%;
    color: #969799;
}
.search-content {
    //  padding-bottom: 0.5rem;
    position: fixed;
    top: 110px;
    width: 100%;
    height: 100vh;
    // background: #f5f5f5;
    background-color: #fff;
    z-index: 99;

    .formgroup {
        background: #ffffff;
        // padding: 0 0.16rem;
        margin-top: 20px;
        margin-bottom: 40px;
        padding-top: 20px;

        .title {
            width: 116px;
            height: 28px;
            font-size: 30px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #191f25;
            line-height: 10px;
            margin-left: 32px;
        }
    }

    .search-bottom {
        width: 100%;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        bottom: 0px;
        padding: 12px 22px;
        font-size: 32px;
        font-weight: 500;

        .btncancel {
            flex: 1;
            background: #f6f6f6;
            // border: 0.01rem solid rgba(25, 31, 37, 0.12);
            box-sizing: border-box;
            height: 78px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 6px;
            margin-right: 20px;
            color: #191f25;
        }

        .btnconfirm {
            flex: 1;
            background: #1890ff;
            box-sizing: border-box;
            height: 78px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 6px;
            color: #ffffff;
        }
    }
}

.bottomLine {
    height: 2px;
    background-color: #f0f0f0;
    margin: 0 32px;
}

.searchBox {
    height: calc(100vh - 320px);
    overflow-y: auto;
    background: #ffffff;
}

.haveUnitBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding-right: 32px;

    /deep/ .van-cell {
        padding-right: 0;
        width: 520px;
    }

    /deep/ .van-field__control {
        max-width: 600px;
    }
}</style>